<template>
  <div class="main">
      <div class="header" >
            
            <div class="in">热销榜单</div>
        </div>
        <div class="main_box">
          <ul class="mui-table-view">
            <div class="clear"></div>
            <li  class="mui-table-view-cell mui-media" v-for="(todo) in todos" :key="todo.g_num_iid">
              <div class="list">    
                    <div class="imgt" @click="open(todo.g_num_iid,todo.g_title,todo.g_zhuansheng,todo.g_img_thumb)">
                        <div class="image">
                        <img v-lazy="todo.g_img_thumb" class="sb_pic fl">
                    </div> 
                    <h5>{{todo.g_title}}</h5> </div>                
                    <div class="sb_r fl"  @click="open(todo.g_num_iid,todo.g_title,todo.g_zhuansheng,todo.g_img_thumb)">  
                         
                        <div class="sb_b">   
                            <div class="fl">
                                <p class='mui-ellipsis'>        
                                    <span class="price">￥{{todo.g_quanhou/100}}</span>     
                                    <span class="price_under">￥{{todo.g_min_group_price/100}}</span>
                                </p>   
                            <div class="quan">
                                <img class="quan_pic fl" src="/static/img/bg_ticket.png">
                                <span class="quan_price">￥{{todo.g_coupon_discount/100}}</span>
                            </div>
                            <p>已拼{{todo.g_sold}}单</p>
                            </div>
                                  
                        </div>   
                    </div>   
                    <div class="sh">
                        <div @click="goshare()" class="share  fr">
                                <img class="share_pic" src="/static/img/share.png">
                                <p>分享赚￥{{todo.g_zhuansheng}}</p>
                            </div>  
                    </div> 
                </div>   
              <div class="clear"></div>            
            </li>
          </ul>
        </div>
      </div>
</template>

<script>
import { Toast,MessageBox,Navbar,TabItem,TabContainer,TabContainerItem } from "mint-ui";
import { mapState, mapMutations, mapGetters } from "vuex";
import axios from 'axios';
export default {
  name: "TuijianContainer",
    data(){
    return{
      todos:[],
      page:1
    }
  },
  beforeMount() {
  // 在页面挂载前就发起请求
   this.getData()
  },
  mounted:function(){
    var _this=this
    this.scroll(this.todos)
  },
  methods:{
    getData:function(){
      var _this=this
      axios.get("/api/common/goodspdd/hot").then(function(res){
        // console.log(res)
        _this.todos=res.data.data
        // console.log( _this.todos)
      })
    },
    scroll:function(data) {
       var _this=this
        // console.log(data)
        let isLoading = false
        window.onscroll = () => {
            // console.log(todos)
            //  console.log(document.documentElement.offsetHeight)
            // console.log(window.innerHeight)
            let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 50
            if (bottomOfWindow && isLoading == false) {
                isLoading = true
                axios.get(
                    "/api/common/goodspdd/hot",
                    {
                      params:{
                          page:_this.page+1
                        }
                    }
                    ).then(response => {
                        _this.page++;
                        console.log( _this.page)
                        for(var i=0;i<response.data.data.length;i++){
                            _this.todos.push(response.data.data[i])
                        }
            isLoading = false
            })
            }
        }
    },
    open: function(id,title,num,img) {
      this.$router.push({ 
          path: "goodDetail", 
          query: {
               num_iid: id,
               title:title,
               num:num,
               img:img
                } });
    }
  }
};
</script>

<style lang="stylus" scoped>
.main_box{
    padding-top 1rem
}
.clear{
  clear: both;
}
.tuijian{
  float: left;
  width :50%;
}
.remai{
  float: left;
  width :50%;
}
p{
  font-size .3rem;
  color :#000;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.main_box li{
  margin-top: .1rem;
  overflow hidden;
}
.lunbo{
    position: relative;
}
.search{
    position: absolute;
    top: 0;
    z-index: 4;
    width: 80%;
    border-radius: 5px;
}
.mui-table-view {
		li {
			h1 {
				font-size: .3rem;
			}
			.mui-ellipsis {
				font-size: 12px;
				color: #226aff;
				display: flex;
				justify-content: space-between;
			}
		}
	}
.sb_r{
     margin-right: .2rem;
    width 30%;
}
.share{
    width 27%
    text-align center
    margin-top .15rem
    border-left 1px solid rgba(0,0,0,0.05)
}
.share_pic{
  width 1rem
  height 1rem
  margin-bottom .2rem
}
.quan_pic{
    width: 1.8rem;
    height: .8rem;
    margin-right: 10px;
    margin-bottom: 5px;
}
.sb_pic{
    width: 25%
    height 25%
    margin-right: .2rem;
}
span{
    font-size: .3rem;
    color: #000;
}
.quan{
    position: relative;
    margin-top: .18rem;
}
.quan_price{
    position: absolute;
    top: .2rem;
    z-index: 0;
    left: .9rem;
}
.price_under{
    text-decoration: line-through;
    color: #999;
    font-size: .2rem;
}
h5{
  width :6.8rem
  overflow: hidden;
  text-overflow :ellipsis;
  white-space: nowrap;
    font-size: .32rem;
    color: #000;
}
.main h2 {
  display: block;
  height: 1.3rem;
  background: white;
  font-size: 0.35rem;
  line-height: 1.3rem;
  padding-left: 0.3rem;
}
.mint-swipe {
    
        height: 200px;
    
        .mint-swipe-item {
    
            &:nth-child(1) {
    
                background-color: red;
    
            }
    
            &:nth-child(2) {
    
                background-color: blue;
    
            }
    
            &:nth-child(3) {
    
                background-color: cyan;
    
            }
    
            img {
    
                width: 100%;
    
                height: 100%;
    
            }
    
        }
    
    }
    
    
    
    .mui-grid-view.mui-grid-9 {
    
        background-color: #fff;
    
        border: none;
    
        margin-top: 22px;
    
        img {
    
            width: 50px;
    
            height: 50px;
    
        }
    
        .mui-media-body {
    
            font-size: 13px;
    
        }
    
    }
    
    
    
    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    
        border: 0;
    
    }
    .header
        width 100%
        height 1.1rem
        z-index 1
        position fixed
        background #ff4040
        color #fff
       
        .in
            width 100%
            height 100%
            line-height 1.1rem
            float left
            overflow hidden
            text-align start
            padding-left .2rem
            font-size 0.45rem
  
</style>